<template>
    <div class="contion">
        <div class="my">
            <van-icon name="wap-nav" size="30" color="#fff" class="icon" style="margin:20px"/>
            <van-icon name="scan" size="30" color="#fff" style="margin-left:260px"/>
            <van-icon name="guide-o" size="30" color="#fff" style="margin:20px"/>
            <div v-for="(j,k) in userlist" :key="k" class="mylist">
                <div class="mylist_1">
                    <img :src="j.img" style="width: 100px;height:100px;border-radius:50%;margin-right:20px"/>
                    <div class="mylist_2">
                        <span style="font-size:20px;margin-bottom:10px"><b>{{ j.username }}</b></span>
                        <span>小红书号：{{ j.red_phone }}<van-icon name="qr" style="margin-left:5px"/></span>
                        <span>IP属地：{{ j.IP }}<van-icon name="info-o" style="margin-left:5px;"/></span>
                    </div>
                </div>
                <div>
                    <span style="margin-left:10px;">{{ j.intro }}</span>
                    <div class="mylist_3">
                        <span style="margin-right:5px">{{ j.sex }}</span>
                        <span>{{ j.age }}岁</span>
                    </div>
                </div>
                <div class="list">
                    <div class="list_1">
                        <div>
                            <span>199</span>
                            <span style="margin-left:15px;">268</span>
                            <span style="margin-left:20px;">1870</span>
                        </div>
                        <div>
                            <span>关注</span>
                            <span style="margin-left:5px;">粉丝</span>
                            <span style="margin-left:5px;">获赞与收藏</span>
                        </div>
                    </div>
                    <div class="mylist_6">
                        <div class="mylist_4">编辑资料</div>
                        <div class="mylist_5" @click="settings"><el-icon><Setting /></el-icon></div>
                    </div>
                </div>
                <div class="list_2">
                    <div class="mylist_7" @click="home">
                        <div class="mylist_7_1">
                            <el-icon :size="20"><ShoppingCart /></el-icon>
                            <span style="margin-left:10px;"><b>购物车</b></span>
                        </div>
                        <span style="font-size:12px;color:#D7D7D7;">13个商品</span>
                    </div>
                    <div class="mylist_7" @click="home">
                        <div class="mylist_7_1">
                            <el-icon :size="20"><Opportunity /></el-icon>
                            <span style="margin-left:10px;"><b>观看历史</b></span>
                        </div>
                        <span style="font-size:12px;color:#D7D7D7;">学创作找灵感</span>
                    </div>
                    <div class="mylist_7" @click="home">
                        <div class="mylist_7_1">
                            <el-icon :size="20"><RefreshRight /></el-icon>
                            <span style="margin-left:10px;"><b>浏览记录</b></span>
                        </div>
                        <span style="font-size:12px;color:#D7D7D7;">看过的笔记</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="list_3">
            <el-tabs v-model="activeName" class="tabs" @tab-click="handleClick">
                <el-tab-pane label="笔记" name="1">
                    <div class="img">
                        <img src="../img/3.png" style="width:200px;">
                        <img src="../img/4.png" style="width:200px;">
                        <img src="../img/1.png" style="width:200px;">
                        <img src="../img/2.png" style="width:190px;">
                    </div>
                </el-tab-pane>
                <el-tab-pane label="收藏" name="2">
                    <div class="img">
                        <img src="../img/1.png" style="width:200px;">
                        <img src="../img/4.png" style="width:200px;">
                        <img src="../img/2.png" style="width:190px;">
                        <img src="../img/3.png" style="width:200px;">
                    </div>
                </el-tab-pane>
                <el-tab-pane label="赞过" name="3">
                    <div class="img">
                        <video controls style="width:200px;">
                            <source src="../img/1.mp4" type="video/mp4">
                        </video>
                        <video controls style="width:200px;height:300px;">
                            <source src="../img/2.mp4" type="video/mp4">
                        </video>
                        <img src="../img/2.png" style="width:190px;">
                        <img src="../img/3.png" style="width:200px;">
                        <img src="../img/4.png" style="width:200px;">
                    </div>
                </el-tab-pane>
            </el-tabs>
            <van-icon name="search" size="25" class="search"/>
        </div>
        <div class="home">
            <span style="margin-left:20px;margin-right:20px" @click="home">首页</span>
            <span style="margin-left:40px;margin-right:20px" @click="goods">购物</span>
            <el-button><el-icon :size="30" @click="add"><Plus color="#fff"/></el-icon></el-button>
            <span style="margin-left:40px;margin-right:20px" @click="message">消息</span>
            <span style="font-size:20px;color:#000;margin-left:40px;margin-right:20px"><b>我</b></span>
        </div>
    </div>
</template>

<script setup>
import {ref,onMounted} from "vue"
import {ElMessage} from 'element-plus'
import http from "../http"
import {useRouter} from 'vue-router'
const router = useRouter()

let userlist = ref({})

const activeName = ref('3')


const activeTab = ref('notes');

const home = () =>{
    router.push('/')
}

const goods = () => {
    router.push('/goods')
}

const add = () => {
    router.push('/add')
}

const message = () => {
    router.push('/message')
}

const settings = () =>{
    router.push('/settings')
}
const handleClick = (tab) => {
  activeTab.value = tab.name;
};

const user = localStorage.getItem('userid')
const getuserlist = () =>{
    http.get(`user/?userid=${user}`).then(res=>{
        userlist.value=res.data
    })
}

onMounted(()=>{
    getuserlist()
})

</script>

<style scoped>
.contion{
    display: flex;
    flex-direction: column;
    justify-content: center;
    vertical-align: middle;
}

.my{
    width: 100%;
    margin: 0 auto; /* 水平居中 */
    background-image: url('../img/2.jpg');
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 1000;
}

.mylist{
    display: flex;
    flex-direction: column;
    margin-left: 15px;
}

.mylist_1{
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
    
}

.mylist_2{
    display: flex;
    flex-direction: column;
    margin-top: 15px;
    color: #fff;
    font-size: 13px;
}

.mylist_3{
    padding-left: 10px;
    width: 60px;
    height: 25px;
    background-color: #7B8D91;
    border-radius: 30px;
    margin-top: 10px;
    margin-bottom: 10px;
    color: #fff;
}

.list{
    display: flex;
    flex-direction: row;
}

.list_1{
    display: flex;
    flex-direction: column;
    margin-right: 80px;
}

.mylist_4{
    padding-left: 20px;
    padding-top: 5px;
    width: 80px;
    height: 30px;
    background-color: #7B8D91;
    border: #FFF 2px solid;
    border-radius: 30px;
    margin-top: 10px;
    margin-bottom: 10px;
    color: #fff;
}

.mylist_5{
    padding-left: 15px;
    padding-top: 10px;
    width: 30px;
    height: 25px;
    background-color: #7B8D91;
    border: #FFF 2px solid;
    color: #fff;
    border-radius: 30px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 20px;
}

.mylist_6{
    display: flex;
    flex-direction: row;
}

.home{
    width: 100%; /* 设置标签栏宽度 */
    max-width: 600px; /* 最大宽度限制 */
    height: 50px;
    margin: 0 auto; /* 水平居中 */
    position: fixed; /* 固定定位，保持在底部 */
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100; /* 确保在其他元素之上 */
    background-color:#FFF;
    padding-top: 20px;
    font-size: 18px;
    color: darkgray;
}

.home button{
    background-color: #FF2442;
    border-radius: 10px;
    width: 60px;
    height: 40px;
    margin-left:20px;
}

.list_2{
    display: flex;
    flex-direction: row;
}

.mylist_7{
    font-size: 15px;
    color: #FFF;
    width: 120px;
    height: 60px;
    padding-left: 10px;
    margin-right: 10px;
    border-radius: 10px;
    background-color: #7B8D91;
    margin-bottom: 20px;
}

.mylist_7_1{
    margin-top: 10px;
}

.list_3{
    width: 100%;
    height: auto;
    background-color: #FFF;
    display: flex;
    flex-direction: row;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.tabs{
    align-items: center;
    justify-content: center;
    width: 100%;
    color: #000;
    position: fixed;
    z-index: 100; /* 确保标签栏在内容之上 */
}

.img{
    display: flex;
    flex-wrap: wrap;
    grid-template-columns: repeat(2, 1fr); /* 根据需要调整列数 */
    display: grid;
    gap: 10px;
    height: 500px; /* 设置固定高度 */
    overflow-y: auto; /* 允许垂直滚动 */
    padding-top: 5px;
    padding-bottom: 50px;
    border-top: 1px darkgray solid;
}

.search{
    width: 100%;
    margin-top: 10px;
    margin-left:380px;
}

</style>